<template>
  <div class="numRange">
    <el-row>
      <el-col :span="11">
        <el-input-number
          v-model="beginVal"
          class="numInput"
          :min="min"
          :step="step"
          :precision="precision"
          :controls-position="controlsPosition"
          :max="max"
          :step-strictly="stepStrictly"
          :controls="controls"
          @change="refreshVal"
        />
      </el-col>
      <el-col :span="2" style="text-align: center;">~</el-col>
      <el-col :span="11">
        <el-input-number
          v-model="endVal"
          class="numInput"
          :min="min"
          :step="step"
          :precision="precision"
          :controls-position="controlsPosition"
          :max="max"
          :step-strictly="stepStrictly"
          :controls="controls"
          @change="refreshVal"
        />
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  components: {
  },
  props: {
    min: {
      type: Number,
      default: -Infinity
    },
    max: {
      type: Number,
      default: Infinity
    },
    step: {
      type: Number,
      default: 1
    },
    stepStrictly: {
      type: Boolean,
      default: false
    },
    precision: {
      type: Number,
      default: 0
    },
    controls: {
      type: Boolean,
      default: true
    },
    controlsPosition: {
      type: String,
      default: null
    },
    value: {
      type: Array,
      default: null
    }
  },
  data() {
    return {
      beginVal: null,
      endVal: null
    }
  },
  computed: {
  },
  watch: {
    value: {
      handler(val) {
        if (val != null && val.length !== 0) {
          this.reset()
        } else {
          this.beginVal = null
          this.endVal = null
        }
      },
      immediate: true
    }
  },
  mounted() {},
  methods: {
    refreshVal() {
      const val = [this.beginVal, this.endVal]
      this.$emit('input', val)
      this.$emit('change', val)
    },
    reset() {
      if (this.value.length === 1) {
        this.beginVal = this.value[0]
        this.endVal = null
      } else {
        this.beginVal = this.value[0]
        this.endVal = this.value[1]
      }
    }
  }
}
</script>
<style scoped>
.numRange {
  width: 300px;
}
.numInput {
  width: 100%;
}
</style>
